import React, { useState } from 'react';
// 引入 antd 组件库组件
import { Layout, Dropdown, Avatar } from 'antd';
// 引入 antd 组件库图标
import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined } from '@ant-design/icons';
// 引入组件样式
import './TopHeader.css'
// withRouter 用于将组件转换为高阶组件
import {withRouter} from 'react-router-dom'
// connect 函数用于将 组件 和 Redux Store仓库 连接起来
import { connect } from 'react-redux'
// 将 Header 组件从 Layout 组件中解构出来
const { Header } = Layout;

const TopHeader = (props)=>{

  // 从本地存储中获取token值，并且将 username用户名称 和 role 从 token 中解构出来，再将 roleName角色名称 从 role 中解构出来
  const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"))

  // 这个items数组用于给下拉菜单Dropdown组件生成下拉菜单项
  const items = [
    { 
      // label是设置下拉菜单项的标题
      label: roleName, 
      key: '1' 
    }, // 菜单项务必填写 key
    { 
      label: '退出', 
      key: '4',
      danger: true, 
      onClick: () => { toLogin() } },
  ];

  // 下拉菜单组件中退出按钮的点击事件回调
  const toLogin = ()=>{
    localStorage.removeItem("token")
    props.history.push('/login')
  }

  const changeCollapsed = ()=>{
    // console.log(props)
    props.changeCollapsed()
  }

  return (
    <Header className="site-layout-sub-header-background" style={{ padding: "0px 16px", backgroundColor: '#fff' }} >
      {/* 下面运用三元运算符，如果 collapsed 值为true，那么展示 MenuUnfoldOutlined 组件，反之展示 MenuFoldOutlined 组件 */}
      {
        // 通过 props 获取到 CollapsedReducer仓库 提供的 isCollapsed属性
        props.isCollapsed ?
        <MenuUnfoldOutlined onClick={changeCollapsed} /> :
        <MenuFoldOutlined onClick={changeCollapsed} />
      }

      <div style={{ float: "right" }}>
        <span>欢迎<span style={{ color: "red" }}>&nbsp; { username } &nbsp;</span>回来</span>

        {/* 下拉菜单组件 */}
        {/* menu 根据menu的属性值生成对应的下拉菜单项 */}
        <Dropdown menu={{ items }}>
          <Avatar style={{ margin: "0 16px" }} size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
};


// connect 函数是 React Redux 库提供的用于创建和连接容器组件的函数。它接收两个参数：mapStateToProps 和 mapDispatchToProps。通过 connect 函数，组件可以访问 Redux Store 中的状态并触发对应的 Action
/* 
    connect(
      mapStateToProps     // mapStateToProps 用于将 Redux Store 中的状态映射到当前组件的属性上
      mapDispatchToProps
    )(被包装的组件)
*/
// mapStateToProps接收一个reducer作为参数对象，下面是将 CollapsedReducer 中的 isCollapsed 解构出来
const mapStateToProps = ({CollapsedReducer:{isCollapsed}})=>{
  // 将 isCollapsed 返回出去，这样当前这个组件就可以通过 props 获取到这个 isCollapsed 属性
  return {
    isCollapsed
  }
}
// mapDispatchToProps 对象，用于将 Action 创建函数映射到 TopHeader 组件的属性上
// 通过将这个 mapDispatchToProps 对象传递给 connect 函数的第二个参数，当前这个组件就可以通过 props 获取到 changeCollapsed 函数
const mapDispatchToProps = {
  changeCollapsed(){
    // 这个函数用于创建一个 Action 对象，该对象的 type 属性为 "change_collapsed"
    return {
      type: "change_collapsed"
    }
  }
}
// withRouter 可以将一个普通的组件转换为 高阶组件
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(TopHeader))   // 将 SideMenu 转换为 高阶组件，这样 TopHeader 中的props就可以拿到处理路由的方法